﻿@{
    Layout = "_CustomerLayout";
    ViewData["Title"] = "图书信息";
    var book = Model;
    ViewData["Name"] = book.CustomerName;
    var isbn = book.isbn + ".jpg";
}
<head>
    <title>图书详情</title>
    <link href="~/css/customerstyle.css" rel='stylesheet' type='text/css' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
    <link rel="stylesheet" href="~/author/layui/css/layui.css" media="all">
    @section Scripts{

        <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
        <link rel="stylesheet" href="~/css/customermain.css">
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            var $ = jQuery.noConflict();
            $(function () {
                $('#activator').click(function () {
                    $('#box').animate({ 'top': '0px' }, 500);
                });
                $('#boxclose').click(function () {
                    $('#box').animate({ 'top': '-700px' }, 500);
                });
            });
            $(document).ready(function () {
                $(".toggle_container").hide();
                $(".trigger").click(function () {
                    $(this).toggleClass("active").next().slideToggle("slow");
                    return false;
                });

            });
        </script>
        <script src="~/js/jquery.imagesloaded.js"></script>
        <script src="~/js/jquery.wookmark.js"></script>
        <script src="~/author/layui/layui.all.js" charset="utf-8"></script>
        <script type="text/javascript">
            (function ($) {
                var $tiles = $('#tiles'),
                    $handler = $('li', $tiles),
                    $main = $('#main'),
                    $window = $(window),
                    $document = $(document),
                    options = {
                        autoResize: false,
                        container: $main,
                        offset: 20,
                        itemWidth: 280
                    };
                function applyLayout() {
                    $tiles.imagesLoaded(function () {
                        if ($handler.wookmarkInstance) {
                        }
                        $handler = $('li', $tiles);
                        $handler.wookmark(options);
                    });
                }
                function onScroll() {
                    var winHeight = window.innerHeight ? window.innerHeight : $window.height(),
                        closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

                    if (closeToBottom) {
                        var $items = $('li', $tiles),
                            $firstTen = $items.slice(0, 10);
                        $tiles.append($firstTen.clone());
                        applyLayout();
                    }
                };
                applyLayout();
                $window.bind('scroll.wookmark', onScroll);
            })(jQuery);
            $("#btn-buy").click(function() {
                with (document.all) {
                    var number = $("#number").val();
                    var address = $("#address").val();
                    var inventory = document.getElementById("inventory");
                        $.ajax({
                            url: '/Customer/AddOrder',
                            data: { number: number, address: address, isbn: @book.isbn},
                            type: "POST",
                            dataType: "JSON",
                            success: function (data) {
                                if (data.code == 120 && data.msg != null) {
                                    layer.msg(data.msg, function () { });
                                }
                                if (data.code == 404 && data.msg != null) {
                                    layer.msg(data.msg, function () { });
                                }
                                if (data.code == 500 && data.msg != null) {
                                    layer.msg(data.msg, function () { });
                                }
                                if (data.code == 200 && data.msg != null) {
                                    layer.alert(data.msg, { icon: 6 });
                                    $('#inventory').html(@book.Inventory-number)
                                }
                            }
                        })
                }
                })

        </script>
    }
</head>
<div class="single-page">
    <div class="single-page-artical">
        <form class="layui-form layui-form-pane" id="buy-form" role="form" action="#" method="post">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">书籍封面</div>
                        <div class="layui-card-body text-center">
                            <img src="~/bookimg/@isbn" title="@book.content" width="350" height="500">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">主要信息</div>
                        <div class="layui-card-body">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend>正版授权</legend>
                            </fieldset>
                            <a style="font-family:'Microsoft YaHei'; font-size:15px; color:mediumslateblue" name="isbn" id="isbn">@book.isbn</a>
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend>当前库存</legend>
                            </fieldset>
                            <div style="font-family:'Microsoft YaHei'; font-size:15px; color:lightcoral" name="inventory" id="inventory">@book.Inventory</div>
                            <br />
                            <div>
                                <fieldset class="layui-elem-field">
                                    <legend>主要内容</legend>
                                    <div class="layui-field-box">
                                        @book.content
                                    </div>
                                </fieldset>
                            </div>
                            <br />
                            <div class="layui-form-item">
                                <label class="layui-form-label">购买数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="number" id="number" lay-verify="required" placeholder="" autocomplete="off" class="form-control layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">收货地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="address" id="address" lay-verify="required" placeholder="" autocomplete="off" class="form-control layui-input">
                                </div>
                            </div>
                            <br />
                            <div>
                                <input id="btn-buy" type="button" class="layui-btn layui-btn-fluid layui-btn-warm layui-btn-radius" value="购买" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>